<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>User Registration</title>
    <link href="resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="resources/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="resources/css/datepicker.css" rel="stylesheet">
    <link href="resources/css/jquery.timepicker.css" rel="stylesheet">

	<style type="text/css">
    
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
    
          .form-signin {
            max-width: 80%;
            padding: 19px 29px 29px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
               -moz-border-radius: 5px;
                    border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
               -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                    box-shadow: 0 1px 2px rgba(0,0,0,.05);
          }
    
          .form-signin .form-signin-heading,
          .form-signin .checkbox {
            margin-bottom: 10px;
          }
    
          .form-signin input[type="text"],
          .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
          }
    
    </style>

</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
	  <div class="navbar-inner">
		<div class="container"> 
			<a class="btn btn-navbar" style="margin-top: 25px;" data-toggle="collapse" data-target=".nav-collapse">
			  <span class="icon-bar"></span> 
			  <span class="icon-bar"></span> 
			  <span class="icon-bar"></span> 
			</a> <a class="brand" style="text-align:center;" href="login.php"><img src="resources/icons/share_ride.png" style="max-width:55px; padding-right:15px"/>Carpooling.lk</a>
		 <div class="nav-collapse collapse" style="float:right">
			<ul class="nav navbar-nav">
			  <li style="text-align:center; float:left">
				<a href="#"><img src="resources/icons/contact_us.png" style="max-width:40px; min-width: 20px;"/><br />Contact us</a>
			  </li>
			  <li style="text-align:center; float:left">
				<a href="#"><img src="resources/icons/about_us.png" style="max-width:40px; min-width: 20px;"/><br />About us</a>
			  </li>
			</ul>
		 </div>
		</div>
	  </div>
	</div>

	<div style="height:85px"></div>
	<div class="container">

		<form class="form-signin">
			<fieldset>
				<div id="step1">
				  <legend>Registration Step 01</legend>
					<div class="control-group">
						<label class="control-label" for="txt_usrname">Email address (User Name)</label>
						<input id="txt_usrname" name="txt_usrname" type="text" class="input-xlarge" placeholder="Email address" />
						<label class="control-label" for="txt_pwd">Password</label>
						<input id="txt_pwd" name="txt_pwd" type="password" class="input-medium" placeholder="Password" />
						<input id="txt_pwd2" name="txt_pwd2" type="password" class="input-medium" placeholder="Re-type Password" />
						<label class="control-label" for="txt_usrtype">User Type</label>
						<label class="radio">
							<input type="radio" name="usrTypeRadio" id="usr_type1" value="Personal" checked />
							Personal
						</label>
						<label class="radio">
							<input type="radio" name="usrTypeRadio" id="usr_type2" value="Corporate" />
							Corporate
						</label>
						<label class="control-label" for="txt_pwd">Name</label>
						<input id="txt_firstname" name="txt_firstname" type="text" class="input-medium" placeholder="First Name" />
						<input  id="txt_lastname" name="txt_lastname" type="text" class="input-medium" placeholder="Last Name" />

						<div class="control-group">
							<label class="control-label" for="gender">Gender</label>
							<div class="controls">
								<select id="gender" name="gender">
									<option>Male</option>
									<option>Female</option>
								</select>
							</div>
						</div>

						<div class="control-group">
							<label class="control-label" for="prof">Profession</label>
							<div class="controls">
								<select id="prof" name="prof">
									<option>Engineer</option>
									<option>Doctor</option>
									<option>Lawyer</option>
									<option>Manager</option>
								</select>
							</div>
						</div>

						<label class="control-label" for="dob">Date Of Birth</label>
						<input id="dob" name="dob" type="text" data-date-format="dd/mm/yyyy" class="datepicker input-medium" />
						<label class="control-label" for="txt_mobile">Mobile Number</label>
						<input id="txt_mobile" name="txt_mobile" type="text" class="input-medium" placeholder="0772345678" />

						<div class="form-actions">
						  <button type="button" id="next-section" class="btn btn-primary">Next Step >>></button>
						</div>
					</div>  
				</div> 
			  
				<div id="step2">

					<label class="control-label"><strong>Prefered Profile Mode(s)</strong></label>
					<label class="checkbox" style="width:20%">
						<input type="checkbox" id="profMode1" name="profMode1" value="Driver" checked />Driver
					</label>
					<label class="checkbox" style="width:20%">
						<input type="checkbox" id="profMode2" name="profMode2" value="Traveller" />Traveller
					</label>
					<br />

					<label class="control-label"><strong>Usually Travelling :</strong></label>
					<div class="control-group">
						<label class="control-label" for="origin">From</label>
						<div class="controls">
							<input id="origin" type="text" data-provide="typeahead" autocomplete="off" data-items="4" name="origin" data-source='["Colombo 1", "Colombo 2", "Colombo 3", "Colombo 4", "Colombo 5", "Colombo 6", "Colombo 7", "Colombo 8", "Colombo 9", "Colombo 10", "Colombo 11" ,"Colombo 12" ,"Colombo 13" ,"Colombo 14" ,"Colombo 15" ,"Athurugiriya" ,"Attidiya" ,"Battaramulla" ,"Biyagama" ,"Boralesgamuwa" ,"Dehiwala" ,"Galle" ,"Gampaha" ,"Ja-Ela" ,"Jawatta" ,"Jayawardanapura" ,"Kadawatha" ,"Kalalgoda" ,"Kalapaluwawa" ,"Kalubowila" ,"Kandana" ,"Kandy" ,"Katunayaka" ,"Kelaniya" ,"Kiribathgoda" ,"Kirulapone" ,"Kohuwala" ,"Kolonnawa" ,"Kottawa" ,"Kotte" ,"Kurunegala" ,"Mahabage" ,"Maharagama" ,"Malabe" ,"Matara" ,"Moratuwa" ,"Mount Lavinia" ,"Mulleriyawa" ,"Nawala" ,"Negombo" ,"Nugegoda" ,"Panadura" ,"Pannipitiya" ,"Peliyagoda" ,"Pepiliyana" ,"Polgasowita" ,"Ragama" ,"Rajagiriya" ,"Ratmalana" ,"Seeduwa" ,"Thalawatugoda" ,"Union Place" ,"Wattala"]'>
						</div>
						<label class="control-label" for="destination">To</label>
						
						<div class="controls">
							<input id="destination" type="text" data-provide="typeahead" autocomplete="off" data-items="4" name="destination" data-source='["Colombo 1", "Colombo 2", "Colombo 3", "Colombo 4", "Colombo 5", "Colombo 6", "Colombo 7", "Colombo 8", "Colombo 9", "Colombo 10", "Colombo 11" ,"Colombo 12" ,"Colombo 13" ,"Colombo 14" ,"Colombo 15" ,"Athurugiriya" ,"Attidiya" ,"Battaramulla" ,"Biyagama" ,"Boralesgamuwa" ,"Dehiwala" ,"Galle" ,"Gampaha" ,"Ja-Ela" ,"Jawatta" ,"Jayawardanapura" ,"Kadawatha" ,"Kalalgoda" ,"Kalapaluwawa" ,"Kalubowila" ,"Kandana" ,"Kandy" ,"Katunayaka" ,"Kelaniya" ,"Kiribathgoda" ,"Kirulapone" ,"Kohuwala" ,"Kolonnawa" ,"Kottawa" ,"Kotte" ,"Kurunegala" ,"Mahabage" ,"Maharagama" ,"Malabe" ,"Matara" ,"Moratuwa" ,"Mount Lavinia" ,"Mulleriyawa" ,"Nawala" ,"Negombo" ,"Nugegoda" ,"Panadura" ,"Pannipitiya" ,"Peliyagoda" ,"Pepiliyana" ,"Polgasowita" ,"Ragama" ,"Rajagiriya" ,"Ratmalana" ,"Seeduwa" ,"Thalawatugoda" ,"Union Place" ,"Wattala"]'>
						</div>
					</div>
					<!--
					<label class="control-label" for="travel_time">Travel Start Time</label>
					<div class="input-append">
						<input id="travel_time" name="travel_time" type="text" class="input-small" style="width:70px;">
						<span class="add-on"><i class="icon-time"></i></span>
					</div>

					<div class="control-group">
						<label class="control-label" for="vehicle_type_id">Vehicle Type</label>
						<div class="controls">
								<select id="vehicle_type_id" name="vehicle_type_id" style="width:auto;">
									<option value="1">Car</option>
									<option value="2">Van</option>
									<option value="3">Double Cab</option>
									<option value="4">Bus</option>
								</select>
						</div>
					</div>
                    -->
					
				  <div class="form-actions">
					<button type="submit" class="btn btn-primary" id="submit-btn">Submit</button>
				  </div>  
				</div>
			</fieldset>
		</form>

		<!-- Site footer -->
		<div class="navbar navbar-inverse navbar-fixed-bottom">
			<div class="navbar-inner"> <a class="brand" href="#" style="padding-left:7%">&copy; Carpooling.lk 2013</a> </div>
		</div>
	</div>

	<!-- JAVASCRIPT INCLUDES -->
	<script type="text/javascript" src="resources/js/jquery.min.js"></script>
	<script type="text/javascript" src="resources/js/bootstrap-datepicker.js"></script>
	<script type="text/javascript" src="resources/js/bootstrap-modal.js"></script>
	<script type="text/javascript" src="resources/js/bootstrap-transition.js"></script>
	<script type="text/javascript" src="resources/js/bootstrap-collapse.js"></script>
	<script type="text/javascript" src="resources/js/bootstrap-typeahead.js"></script>
	<script type="text/javascript" src="resources/js/jquery.timepicker.js"></script>


	<script type="text/javascript">

	  function isValidEmailAddress(emailAddress) {

			var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
		
			return pattern.test(emailAddress);

		};
		
		
		function isValidPhonenumber(phoneNum)  {
			var pattern = /^\d+$/;  
			if(pattern.test(phoneNum) && phoneNum.length == 10) {  
       			return true;    
     		} else {  
       			return false;  
     		}
		}



	  function usernameAvailable(){

		  jQuery.ajax({
			url: 'check_username.php',
			type: "POST",
			data: 'txt_usrname=' + $('#txt_usrname').val(),
			success: function(data){
			  if(data=="success"){
				  $("#step1").hide();
				  $("#step2").show();
				  $("#profMode1").focus();
			  }else if(data=="nodata"){
				alert("Please enter a username to continue.");
				$("#txt_usrname").focus();
			  }else{
				alert("Username already in use. Please try a different username.");
				$("#txt_usrname").focus();
			  }
			}
		  });
	  }

	  $('.datepicker').datepicker();

	  $("#step2").hide();

	  $('#next-section').click(function(){

		if($("#txt_usrname").val()==""){
		  alert("Please enter a Username");
		  $("#txt_usrname").focus();
		}else if(!isValidEmailAddress($("#txt_usrname").val())){
		  alert("Please enter valid Email Address");
		  $("#txt_usrname").focus();
		}else if($("#txt_pwd").val() =="" || $("#txt_pwd2").val()==""){
		  alert("Please fill a password");  
		  $("#txt_pwd").focus();
		}else if($("#txt_pwd").val() != $("#txt_pwd2").val()){
		  alert("Passwords do not match. Please enter the same password for both fields.");  
		  $("#txt_pwd").focus();
		}else if($("#txt_firstname").val() == ""){
		  alert("Please fill your First name");
		  $("#txt_firstname").focus();
		}else if($("#txt_lastname").val() == ""){
		  alert("Please fill your Last name");
		  $("#txt_lastname").focus();
		}else if(!isValidPhonenumber($("#txt_mobile").val())){
		  alert("Please enter valid Phone Number with 10 digits.");
		  $("#txt_mobile").focus();
		}else{
		  usernameAvailable();
		}
	  });

	  function submitForm(){
		  jQuery.ajax({
			url: 'save_registration.php',
			type: "POST",
			data: $('.form-signin').serialize(),
			success: function(data) {
			  if(data=="success"){
				alert("Registration successful. Please check your mail.")
				window.location.replace("login.php");
			  }else{  
				alert("Registration failed. Please try again.");
				$("#step2").hide();
				$("#step1").show();
				$("#txt_usrname").focus();
			  }
			}
		  });
	  }

	  $("#submit-btn").bind('click', function(event){
		event.preventDefault();
		submitForm();
	  });
	  
	  $(function() {
		$('#travel_time').timepicker({ 'scrollDefaultNow': true });
	  });

	</script>

</body>

</html>

